require("../../assets/css/basic.less");
require("../../assets/css/normalize.css");
require("../../assets/css/property.css");
require("../../assets/css/reset.css");
require("../../assets/fonts/font-icon/iconfont.css");
require("../user_sports_data/user_sports_data.less");

//引入模块
const utils = require("../../libs/utils");
const axios = require("../../libs/axios.js");
const dom = require("../../libs/dom.js");
import * as echarts from "echarts";

document.addEventListener("DOMContentLoaded", async function () {
	// 1.返回上一页
	dom.get(".backBtn").addEventListener("click", function () {
		history.back();
	});

	// 2.获取运动数据,渲染到页面
	let res = await axios.get("/api/exercise");
	console.log(res.data.data);
	let { sum7Duration, sum7Meter, sum7Calorie, days } = res.data.data;

	dom.get(".totaltime").textContent = sum7Duration;
	dom.get(".distance").textContent = sum7Meter;
	dom.get(".calorie").textContent = sum7Calorie;
	dom.get(".totaldays").textContent = days.length;
	dom.get(".days").textContent = days.length;

	// console.log(days);

	// 3.引入图表
	// 图表1渲染数据
	let a = days.map((v) => v.date.slice(5));
	let b = days.map((v) => v.sumDuration);
	// 基于准备好的dom，初始化echarts实例
	// 绘制图表
	// 图表1 柱状图
	var chartDom = dom.get(".chart1");
	var myChart = echarts.init(chartDom);
	var option;

	option = {
		//标题
		title: {
			text: "近7天运动时长",
			left: 20,
			top: 15,
		},
		// 网格布局
		grid: {
			left: 50,
			height: 100,
		},
		//x轴
		xAxis: {
			type: "category",
			data: a,
		},
		//y轴
		yAxis: {
			type: "value",
		},
		//数据序列
		series: [
			{
				data: b,
				type: "bar",
				showBackground: true,
				backgroundStyle: {
					color: "rgba(180, 180, 180, 0.2)",
				},
			},
		],
		//颜色
		color: ["#4294ff"],
	};

	option && myChart.setOption(option);

	// 图表2 饼图
	// 图表2 渲染数据
	let data1 = 0;
	days.forEach((v) => {
		data1 += v.exerciseData[0].duration;
	});

	let data2 = 0;
	days.forEach((v) => {
		data2 += v.exerciseData[1].duration;
	});

	let data3 = 0;
	days.forEach((v) => {
		data3 += v.exerciseData[2].duration;
	});
	// console.log(data1, data2, data3);
	//饼图
	var chartDom = dom.get(".chart2");
	var myChart = echarts.init(chartDom);
	var option;

	option = {
		title: {
			text: "运动分类",
			// textStyle: {
			// 	fontWeight: "normal",
			// 	fontSize: "14px",
			// },
			left: 20,
			top: 15,
		},
		tooltip: { trigger: "item" },
		// 图例
		legend: {
			orient: "vertical",
			left: "left",
			top: 50,
			itemWidth: 30,
		},
		series: [
			{
				type: "pie",
				radius: "80%", //饼图的半径大小
				center: ["55%", "50%"], //饼图的位置
				data: [
					{
						value: data1,
						name: "跑步",
					},
					{
						value: data2,
						name: "骑行",
					},
					{
						value: data3,
						name: "训练",
					},
				],
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: "rgba(0, 0, 0, 0.5)",
					},
				},
				label: {
					//饼图图形上的文本标签

					show: true,
					position: "inside", //标签的位置
					textStyle: {
						fontWeight: "normal",
						fontSize: 16, //文字的字体大小
						color: "#fff",
					},
					formatter: "{d}%",
				},
			},
		],
	};

	option && myChart.setOption(option);

	// 图表3
	// 图表3 渲染数据
	let data1Arr = days.map((v) => v.exerciseData[0].calorie);
	let data2Arr = days.map((v) => v.exerciseData[1].calorie);
	let data3Arr = days.map((v) => v.exerciseData[2].calorie);
	// console.log(data1Arr, data2Arr, data3Arr);

	var chartDom = dom.get(".chart3");
	var myChart = echarts.init(chartDom);
	var option;

	option = {
		legend: {
			orient: "vertical",
			right: "10",
			top: 50,
			itemWidth: 10,
		},
		tooltip: {
			trigger: "axis",
			axisPointer: {
				// Use axis to trigger tooltip
				type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
			},
		},
		title: {
			text: "近7日运动分类",
			// textStyle: {
			// 	fontWeight: "normal",
			// 	fontSize: "14px",
			// },
			left: 20,
			top: 10,
		},
		grid: {
			left: "10",
			right: "60",
			bottom: "20",
			top: 30,
			containLabel: true,
		},
		xAxis: { type: "value" },
		yAxis: {
			type: "category",
			data: a,
			axisTick: { show: false },
		},
		series: [
			{
				name: "跑步",
				type: "bar",
				stack: "total",
				data: data1Arr,
			},
			{
				name: "骑行",
				type: "bar",
				stack: "total",

				data: data2Arr,
			},
			{
				name: "训练",
				type: "bar",
				stack: "total",

				data: data3Arr,
			},
		],
	};

	option && myChart.setOption(option);

	// 最后一个折线图
	// 图表2 渲染数据
	console.log(days);
	let num = days.map((v) => v.count);
	console.log(num);

	//
	var chartDom = dom.get(".chart4");
	var myChart = echarts.init(chartDom);
	var option;

	option = {
		title: {
			text: "近7日训练次数",
			left: 20,
			top: 15,
		},
		xAxis: {
			type: "category",
			data: a,
		},
		yAxis: {
			type: "value",
		},
		series: [
			{
				data: num,
				type: "line",
			},
		],
	};

	option && myChart.setOption(option);
});
